<template>

	<view>
		<uamhead :title="title"></uamhead>
		<view class="list-head">
			<view class="list-head-img">
				<image :src="playlist.coverImgUrl" mode=""></image>
				<text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
			</view>
			<view class="list-head-text">
				<view>{{ playlist.name }}</view>
				<view>{{ playlist.description }}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
					<view v-show="isShow" class="list-music-title">
						<text class="iconfont iconbofang1"></text>
						<text>播放全部</text>
						<text>(共{{ playlist.trackCount }}首)</text>
					</view>
					<view class="list-music">
						<view class="list-music-item" v-for="(item,index) in playlist.tracks" :key="item.id"  @tap="navPlayer(item.id)">
							<view class="list-music-top">{{ index + 1 }}</view>
							<view class="list-music-song">
								<view>{{ item.name }}</view>
								<view>
									<image v-if=" privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png" mode=""></image>
									<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>
									{{ item.ar[0].name }} - {{ item.name }}
								</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
				</scroll-view>
	</view>
</template>

<script>
	
	import {list} from '../../common/api.js';
	export default {
		data() {
			return {
				title: "榜单列表",
				playlist: {
					// coverImgUrl: '',
					// trackCount: '',
					// creator: ''
				},
				privileges : [],
								isShow : false
			}
		},
		onLoad(options) {
			let listid = options.listid;
			list(listid).then((res) => {
				if (res.data.code == '200') {
					this.title = res.data.playlist.name
					this.playlist = res.data.playlist
					this.privileges = res.data.privileges
					this.isShow=true
				}

			})
		},
		methods: {
			navPlayer(id){
				uni.navigateTo({
					url:'/pages/player/player?playerid='+id
				});
			console.log(id)
			}
		}
	}
</script>

<style>
	.list-head {
		display: flex;
		margin: 30rpx;
	}

	.list-head-img {
		width: 265rpx;
		height: 265rpx;
		border-radius: 15rpx;
		margin-right: 40rpx;
		overflow: hidden;
		position: relative;
	}

	.list-head-img image {
		width: 100%;
		height: 100%;
	}

	.list-head-img text {
		position: absolute;
		font-size: 26rpx;
		color: white;
		right: 8rpx;
		top: 8rpx;
	}

	.list-head-text {
		flex: 1;
		font-size: 24rpx;
		color: #c3d1e3;
	}

	.list-head-text image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}
	
	.list-music{ background:white; border-radius: 50rpx; overflow: hidden; margin-top:45rpx;}
	.list-music-item{ display: flex; margin:0 30rpx 70rpx 44rpx; align-items: center;}
	.list-music-top{ width:56rpx; font-size:28rpx; color:#979797;}
	.list-music-song{ flex:1; line-height: 40rpx;}
	.scroll-Y {height: 700rpx;}
	.list-music-title{ height:58rpx; line-height: 58rpx; margin:30rpx 30rpx 70rpx 30rpx;}
	.list-music-song image{ width:34rpx; height:22rpx; margin-right:10rpx;}
</style>